<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/layuimini.css?v=2.0.4.2}" media="all">
    <link rel="stylesheet" th:href="@{/css/themes/default.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <title>Title</title>
    <style>
        .div-content {
            background-color: white;
            border-radius: 5px;
            padding: 15px;
        }

        .a {
            margin: 0;
            border: 1px solid #e6e6e6;
            padding: 10px 20px 5px 20px;
            color: #6b6b6b;
        }
    </style>
</head>
<body>
<div class="div-content">
    <form class="layui-form layui-form-pane" id="form-search">
        <fieldset class="a">
            <legend>搜索条件</legend>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">员工姓名</label>
                    <div class="layui-input-inline" style="width: 150px;">
                        <input type="text" name="name" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">生日</label>
                    <div class="layui-input-inline" style="width: 120px;">
                        <input type="text" name="startDate" placeholder="开始日期" autocomplete="off"
                               class="layui-input date">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" style="width: 120px;">
                        <input type="text" name="endDate" placeholder="结束日期" autocomplete="off"
                               class="layui-input date">
                    </div>

                    <div class="layui-inline">
                        <button id="btn-search" lay-submit lay-filter="btn-search-filter" type="button"
                                class="layui-btn layui-btn-radius layui-btn-normal">
                            <i class="layui-icon layui-icon-search"></i>
                            搜索
                        </button>
                        <button id="btn-reset" type="reset" class="layui-btn layui-btn-radius layui-btn-primary">
                            <i class="layui-icon layui-icon-fonts-clear"></i>
                            清空条件
                        </button>
                    </div>

                </div>
            </div>
        </fieldset>
    </form>
    <table id="table-emp" lay-filter="table-emp-filter"></table>
</div>
<script type="text/html" id="convertSex">
    {{#
    if (d.sex == 'M') {
    return '男';
    } else if (d.sex == 'F') {
    return '女';
    } else {
    return '无';
    }
    }}
</script>
<script type="text/html" id="convertDept">
    {{#
    return d.dept.deptName;
    }}
</script>
<script type="text/html" id="table-emp-toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
    </div>
</script>

<script type="text/html" id="col-emp-toolbar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}" charset="utf-8"></script>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:inline="javascript">

    function refreshTable() {
        $("#btn-reset").click();
        $("#btn-search").click();

    }

    var ctxPath = [[@{/}]];
        layui.use(['laydate', 'table', 'form'], function () {
            var laydate = layui.laydate;
            var table = layui.table;
            var form = layui.form;
            //表格头部工具栏事件监听
            table.on('toolbar(table-emp-filter)', function (obj) {
                if (obj.event === "add") {
                    layer.open({
                        type: 2,
                        title: "新增员工",
                        area: ['80%', '80%'],
                        //shadeClose: true,
                        content: ctxPath + 'emp/add/ui'
                    });
                } else if (obj.event === "delete") {
                    let checkStatus = table.checkStatus('table-emp');
                    //如果没有选中数据
                    if (checkStatus.data.length === 0) {
                        layer.alert('未选中任何数据', {icon: 2, anim: 6, title: "警告"});
                        return false;
                    }

                    //选中的id
                    let idArr = new Array();
                    $(checkStatus.data).each(function () {
                        idArr.push(this.empId);
                    });

                    layer.confirm('请确认删除选中的记录', {icon: 3, title: '确认'}, function (index) {
                        let url = ctxPath + "emp/" + idArr.join(",");
                        let params = {
                            _method: "DELETE"
                        }
                        $.post(url, params, function (response) {
                            if (response.code === 0) {
                                layer.msg(response.message, {icon: 1});
                                refreshTable();
                            } else {
                                layer.alert(response.message, {icon: 2, anim: 6})
                                //refreshTable();
                            }
                        });
                        layer.close(index);
                    });
                }
            });

            laydate.render({
                elem: '.date'
            });

            table.render({
                elem: '#table-emp'
                , url: ctxPath + 'emp/list'
                , page: true
                , toolbar: "#table-emp-toolbar"
                , limits: [3, 5, 10, 20, 50, 100, 200, 500]
                , cols: [[//
                    {type: "checkbox", width: 60}
                    , {field: 'empId', title: '员工编号', width: 120, sort: true}
                    , {field: 'name', title: '姓名', width: 140}
                    , {field: 'sex', title: '性别', width: 80, sort: true, templet: '#convertSex'}
                    , {field: 'age', title: '年龄', width: 80}
                    , {field: 'sal', title: '工资', width: 140}
                    , {field: 'dept', title: '部门', width: 140, sort: true, templet: '#convertDept'}
                    , {field: 'birthday', title: '生日', width: 120, sort: true}
                    , {field: 'address', title: '家庭住址'}
                    , {title: '操作', width: 135, align: 'center', toolbar: '#col-emp-toolbar'}
                ]]
            });
            form.on('submit(btn-search-filter)', function (data) {
                console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                //刷新表格
                table.reload('table-emp', {
                    where: { //设定异步数据接口的额外参数，任意设
                        name: data.field.name,
                        startDate: data.field.startDate,
                        endDate: data.field.endDate
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            //监听操作列
            table.on('tool(table-emp-filter)', function (obj) {
                let data = obj.data;
                let layEvent = obj.event;

                if (layEvent === 'del') {
                    layer.confirm('请确认删除该员工: ' + data.name + ' ?', {icon: 3, title:'确认'}, function (index) {
                        let url =ctxPath+ "emp/" + data.empId;
                        let params = {
                            _method: "DELETE"
                        }
                        $.post(url, params, function (response) {
                            if (response.code === 0) {
                                layer.msg(response.message, {icon: 1});
                                refreshTable();
                            } else {
                                layer.alert(response.message, {icon: 2, anim: 6})
                                //refreshTable();
                            }
                        });
                        layer.close(index);
                    });
                } else if (layEvent === 'edit') {
                    layer.open({
                        type: 2,
                        title: "编辑员工",
                        area: ['80%', '80%'],
                        //shadeClose: true,
                        content: ctxPath+'emp/' + data.empId
                    });
                }
            });
        });
</script>
</body>
</html>